<template>
	<div class="costCalculate-box">
		<div class="nav-bar">费用计算</div>
		<div class="content-wrap">
			<van-button class="item-btn" @click="toCalculate(CostCategory.Electricity)">计算电费</van-button>
			<van-button class="item-btn" @click="toCalculate(CostCategory.Water)">计算水费</van-button>
			<van-button class="item-btn" @click="toCalculate(CostCategory.Gas)">计算燃气费</van-button>
			<van-button class="item-btn" @click="router.push('/costCalculate/all')">计算水电燃气费</van-button>
		</div>
	</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, getCurrentInstance, computed } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { storeToRefs } from "pinia";
import { CostCalculateStore } from "@/store/costCalculate";
import { nanoid } from "nanoid";
import { useRouter } from "vue-router";
import { CostConfig, CostCategory, RoomType } from "@/interface/costCalculate";

const { proxy } = useCurrentInstance();
const router = useRouter();

const costCalculateStore = CostCalculateStore();
let { costConfigs, currentCostCategory } = storeToRefs(costCalculateStore);

const toCalculate = (type: CostCategory) => {
	currentCostCategory.value = type;
	router.push("/costCalculate/single");
};

onMounted(() => {
	costConfigs.value = [
		{
			//电费
			costCategory: CostCategory.Electricity.toString(),
			roomConfigs: [
				{
					roomType: RoomType.zhuWo.toString(),
					parts: 1
				},
				{
					roomType: RoomType.tingWo.toString(),
					parts: 1
				},
				{
					roomType: RoomType.beiCiWo.toString(),
					parts: 1
				},
				{
					roomType: RoomType.nanCiWo.toString(),
					parts: 1
				},
				{
					roomType: RoomType.tingWo_2.toString(),
					parts: 0
				},
				{
					roomType: RoomType.nanCiWoOld.toString(),
					parts: 1
				},
				{
					roomType: RoomType.nanCiWoNew.toString(),
					parts: 0.7
				}
			]
		},
		{
			//水费
			costCategory: CostCategory.Water.toString(),
			roomConfigs: [
				{
					roomType: RoomType.zhuWo.toString(),
					parts: 1
				},
				{
					roomType: RoomType.tingWo.toString(),
					parts: 2
				},
				{
					roomType: RoomType.beiCiWo.toString(),
					parts: 1
				},
				{
					roomType: RoomType.nanCiWo.toString(),
					parts: 1
				},
				{
					roomType: RoomType.tingWo_2.toString(),
					parts: 1
				},
				{
					roomType: RoomType.nanCiWoOld.toString(),
					parts: 1
				},
				{
					roomType: RoomType.nanCiWoNew.toString(),
					parts: 1
				}
			]
		},
		{
			//燃气费
			costCategory: CostCategory.Gas.toString(),
			roomConfigs: [
				{
					roomType: RoomType.zhuWo.toString(),
					parts: 0
				},
				{
					roomType: RoomType.tingWo.toString(),
					parts: 2
				},
				{
					roomType: RoomType.beiCiWo.toString(),
					parts: 1
				},
				{
					roomType: RoomType.nanCiWo.toString(),
					parts: 1
				},
				{
					roomType: RoomType.tingWo_2.toString(),
					parts: 1
				},
				{
					roomType: RoomType.nanCiWoOld.toString(),
					parts: 1
				},
				{
					roomType: RoomType.nanCiWoNew.toString(),
					parts: 1
				}
			]
		}
	];
});
</script>
<style lang="scss" scoped>
.nav-bar {
	height: 0.5rem;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	font-size: 0.2rem;
	border-bottom: 1px solid #e0e0e0;
}

:deep(.van-field) {
	font-size: 0.14rem;
	// border-radius: 8px;
}

.content-wrap {
	margin-top: 0.2rem;
	padding: 0.2rem 0.16rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	.item-btn {
		width: 70%;
		height: 0.8rem;
		font-size: 0.2rem;
		margin-bottom: 0.4rem;
		border: none;
	}
}
</style>
